
在延伸出其他頁面之前,還是有必要重新檢視目前頁面的設計狀況,這裡我想用另外一個 skill 來檢查看看。
在開始動用 skill 之力前,先嘗試幾個我覺得能馬上改善的,也是我看了不少 AI 簡報或 Vibe Coding 後發現的共通點 XD
看圖最快 XD

AI 感的萬惡之源就是隨處都是卡片,我沒說便當盒風格不好,但沒叫你四處用啊!
所以標頭這裡的框框直接拿掉了,大標也改為置中,最重要的是原本那不明所以的文案也要改一改 XD

另外一個萬惡之源就是非功能性的 icon 或 emoji......圖案可能很重要,但我不喜歡無意義的使用,所以都砍了!
據說是用來減少網站視覺呈現的 AI 感,懶一點的話連 skill 都可以讓 Agent 自己裝:

/impeccable critique 執行後會對使用者體驗相關的部分提出建議:

這些我也放到 /plans 裡面當作修改的依據。
整體變化比較明顯的是篩選的區塊合併在一起了,原本我也覺得這部分有點怪,但又不是很確定怎麼改比較好 XD

其他 Agent 修復的大多是對比度或是一些操作流程中斷的問題。
最後也用 /impeccable document 產生 DESIGN.md 把設計規則定住,這樣後續設計其他頁面才不會犯一樣的毛病:

DESIGN.md 固定住設計風格與規範